<template>
  <div class="page-content">
    <h2>接口在线调试工具</h2>
    <div class="des">此工具旨在帮助开发者检测调用接口时发送的请求参数是否正确，提交相关信息后可获得服务器的验证结果</div>
    <p><strong>使用说明：</strong></p>
    <p>（1）选择合适的接口。</p><p>（2）系统会生成该接口的参数表，您可以直接在文本框内填入对应的参数值。</p>
    <p>（3）点击检查问题按钮，即可得到相应的调试信息。</p>
    <div class="debug-container">
      <div class="debug-form">
        <div class="debug-line">
          <p>
            <span>一、接口列表</span>
            <button class="debug-cgi-list" :class="{on: btnTab === 'api1'}" @click="btnTab = 'api1'">获取用户信息和access_token</button>
            <button class="debug-cgi-list" :class="{on: btnTab === 'api2'}" @click="btnTab = 'api2'">重新获取access_token</button>
            <button class="debug-cgi-list" :class="{on: btnTab === 'api4'}" @click="btnTab = 'api4'">实验结果数据回传接口</button>
            <button class="debug-cgi-list" :class="{on: btnTab === 'api5'}" @click="btnTab = 'api5'">MD5签名</button>
          </p>
        </div>
        <div v-if="btnTab === 'api1'" class="debug-params">
          <div class="debug-line">
            <select class="debug-cgi-method">
              <option value="GET">GET</option>
            </select>
            <span>{{ addr }}/oauth/token/accesstoken?ticket=TICKET&amp;appid=APPID&amp;signature=SIGNATURE</span>
          </div>
          <div class="debug-line debug-param-line">
            <p>二、参数列表</p>
            <div class="param-item">
              <p>
                <span class="param-name"><i class="require">*</i>ticket</span>
                <input v-model="api1.ticket" require="true" placeholder="如：udhK4eTKk67bmlCRBqgaUr19jnzI4pSx8ZWwF1GvwIBWSzQFTFheFMzR9XUiuE8qzpE9YpMlLKdWEFpFxw%2BC%2BPNx%2BY8Ahr3qtyD6xLl2RRE%3D">
              </p>
              <p class="tips">填写ticket，登录后，点击“我要做实验”按钮获取的ticket令牌</p>
              <p class="err-tip" />
            </div>
            <div class="param-item">
              <p>
                <span class="param-name"><i class="require">*</i>appid</span>
                <input v-model="api1.appid" require="true" placeholder="如：1681600222748241929">
              </p>
              <p class="tips">填写appid，“平台”分配给各实验平台的唯一编号</p>
              <p class="err-tip" />
            </div>
            <div class="param-item">
              <p><span class="param-name"><i class="require">*</i>signature</span>
                <input v-model="api1.signature" require="true" placeholder="如：A4BBBAF20DFD3380DFE3D4C8BCF37F98"></p>
              <p class="tips">填写签名</p>
              <p class="err-tip" />
            </div>
            <div class="debug-line">
              <span class="debug-btn" :class="{disable: api1.ticket.length === 0 || api1.appid.length === 0 || api1.signature.length === 0}" @click="callApi1">检查问题</span>
            </div>
          </div>
        </div>
        <div v-if="btnTab === 'api2'" class="debug-params">
          <div class="debug-line">
            <select class="debug-cgi-method">
              <option value="GET">GET</option>
            </select>
            <span>{{ addr }}/oauth/token/refreshtoken?<span style="color: red">refresh_token</span>=REFRESH_TOKEN&amp;appid=APPID&amp;signature=SIGNATURE</span>
          </div>
          <div class="debug-line debug-param-line">
            <p>二、参数列表</p>
            <div class="param-item">
              <p>
                <span class="param-name"><i class="require">*</i>refresh_token</span>
                <input v-model="api2.refresh_token" require="true" placeholder="如：eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtc2ciOiLosIPnlKjmiJDlip_vvIzov5Tlm57miYDpnIDmlbDmja4iLCJjb2RlIjowLCJjcmVhdGVfdGltZSI6MTcxMTEwMDA4MDAyMiwiY3JlYXRlX3RpbWVfZGlzcGxheSI6IjIwMjQtMDMtMjIgMTc6MzQ6NDAiLCJ1c2VyX25hbWUiOiIxNzAxODA4MTY5NzkzMTM4NjkwIiwiYXV0aG9yaXRpZXMiOlsiQURNSU4iXSwiY2xpZW50X2lkIjoiMTY4MTYwMDIyMjc0ODI0MTkyOSIsImRpcyI6IjE3MDE4MDgxNjk3OTMxMzg2OTAiLCJzY29wZSI6WyJjYWxsYmFjazpzY29yZSJdLCJhdGkiOiIyYTIyYmM4OS01ZDkzLTRkZmEtOGI3Ni00ZmNlOGQwMDI0MDQiLCJleHBpcmVzX3RpbWVfZGlzcGxheSI6IjIwMjQtMDMtMjMgMTc6MzQ6MzkiLCJ1biI6IjE3MDE4MDgxNjk3OTMxMzg2OTAiLCJleHAiOjE3MTM2OTIwODAsImp0aSI6IjhmZWFkYWQyLWJkMDAtNGRkZC04ZmVlLTE0NWVlNmE4NmMzZSIsImV4cGlyZXNfdGltZSI6MTcxMTE4NjQ3OTAyMn0.MDAzgb0ysLRP7seu5Q7WyFf2t7fbYWQ5EjUwqF7MJfM"></p>
              <p class="tips">填写refresh_token，调用“获取用户信息和access_token”接口时返回的<span style="color:red">refresh_token</span>，需要做encodeURIComponent</p>
              <p class="err-tip" />
            </div>
            <div class="param-item">
              <p>
                <span class="param-name"><i class="require">*</i>appid</span>
                <input v-model="api2.appid" require="true" placeholder="如：1681600222748241929">
              </p>
              <p class="tips">填写appid，“平台”分配给各实验平台的唯一编号</p>
              <p class="err-tip" />
            </div>
            <div class="param-item">
              <p>
                <span class="param-name"><i class="require">*</i>signature</span>
                <input v-model="api2.signature" require="true" placeholder="如：B4A5C7AB258AD8F0CF5D9EB0DBB985CF">
              </p>
              <p class="tips">填写签名</p>
              <p class="err-tip" />
            </div>
            <div class="debug-line">
              <span class="debug-btn" :class="{disable: api2.refresh_token.length === 0 || api2.appid.length === 0 || api2.signature.length === 0}" @click="callApi2">检查问题</span>
            </div>
          </div>
        </div>
        <div v-if="btnTab === 'api4'" class="debug-params">
          <div class="debug-line">
            <select class="debug-cgi-method">
              <option value="POST">POST</option>
            </select>
            <span>{{ addr }}/oauth/api/v1/data_upload?access_token=ACCESS_TOKEN</span>
          </div>
          <div class="debug-line debug-param-line">
            <p>二、参数列表</p>
            <div class="param-item">
              <p>
                <span class="param-name"><i class="require">*</i>access_token</span>
                <input v-model="api4.access_token" require="true" placeholder="如：eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtc2ciOiLosIPnlKjmiJDlip_vvIzov5Tlm57miYDpnIDmlbDmja4iLCJjb2RlIjowLCJjcmVhdGVfdGltZSI6MTcxMTEwMDEwOTYwNywiY3JlYXRlX3RpbWVfZGlzcGxheSI6IjIwMjQtMDMtMjIgMTc6MzU6MDkiLCJ1c2VyX25hbWUiOiIxNzAxODA4MTY5NzkzMTM4NjkwIiwiYXV0aG9yaXRpZXMiOlsiQURNSU4iXSwiY2xpZW50X2lkIjoiMTY4MTYwMDIyMjc0ODI0MTkyOSIsImRpcyI6IjE3MDE4MDgxNjk3OTMxMzg2OTAiLCJzY29wZSI6WyJjYWxsYmFjazpzY29yZSJdLCJleHBpcmVzX3RpbWVfZGlzcGxheSI6IjIwMjQtMDMtMjMgMTc6MzU6MDgiLCJ1biI6IjE3MDE4MDgxNjk3OTMxMzg2OTAiLCJleHAiOjE3MTExODY1MDksImp0aSI6ImZkODlmMmZmLTY2NzktNGM4Ny05NDczLWY3OThiZmYyMGFiZiIsImV4cGlyZXNfdGltZSI6MTcxMTE4NjUwODYwN30.rhl0Kdx8Uzlz2no472d1p-QYOSNQypaA1kTk6f_osxE">
              </p>
              <p class="tips">填写access_token，调用“获取用户信息和access_token”接口时返回的access_token，需要做encodeURIComponent</p>
              <p class="err-tip" />
            </div>
            <div class="param-item">
              <p>
                <span class="param-name"><i class="require">*</i>body</span>
                <textarea v-model="api4.body" require="true" placeholder="如：{&quot;username&quot;:&quot;1701808169793138690&quot;,&quot;title&quot;:&quot;实验名称&quot;,&quot;status&quot;:1,&quot;score&quot;:100,&quot;startTime&quot;:1522646936023,&quot;endTime&quot;:1522647936001,&quot;timeUsed&quot;:900,&quot;appid&quot;:&quot;100001&quot;,&quot;originId&quot;:&quot;1&quot;,&quot;steps&quot;:[{&quot;seq&quot;: 1,&quot;title&quot;: &quot;实验步骤1&quot;,&quot;startTime&quot;: 1522646936000,&quot;endTime&quot;: 1522647936000,&quot;timeUsed&quot;: 900,&quot;expectTime&quot;:2,&quot;maxScore&quot;:10,&quot;score&quot;:10,&quot;repeatCount&quot;:1,&quot;evaluation&quot;:&quot;优&quot;,&quot;scoringModel&quot;:&quot;赋分模型&quot;,&quot;remarks&quot;:&quot;备注&quot;}]}" />
              </p>
              <p class="tips">填写body，提交的实验记录JSON数据</p>
              <p class="err-tip" />
            </div>
            <div class="debug-line">
              <span class="debug-btn" :class="{disable: api4.access_token.length === 0 || api4.body.length === 0}" @click="callApi4">检查问题</span>
            </div>
          </div>
        </div>
        <div v-if="btnTab === 'api5'" class="debug-params">
          <div class="debug-line">
            <select class="debug-cgi-method">
              <option value="GET">GET</option>
            </select>
            <span>{{ addr }}/oauth/token/accesstoken?ticket=TICKET&amp;appid=APPID&amp;signature=SIGNATURE</span>
          </div>
          <div class="debug-line debug-param-line">
            <p>二、参数列表</p>
            <div class="param-item">
              <p>
                <span class="param-name"><i class="require">*</i>ticket</span>
                <input v-model="api5.ticket" require="true" placeholder="如：udhK4eTKk67bmlCRBqgaUr19jnzI4pSx8ZWwF1GvwIBWSzQFTFheFMzR9XUiuE8qzpE9YpMlLKdWEFpFxw%2BC%2BPNx%2BY8Ahr3qtyD6xLl2RRE%3D">
              </p>
              <p class="tips">填写ticket，登录后，点击“我要做实验”按钮获取的ticket令牌</p>
              <p class="err-tip" />
            </div>
            <div class="param-item">
              <p>
                <span class="param-name"><i class="require">*</i>appid</span>
                <input v-model="api5.appid" require="true" placeholder="如：1681600222748241929">
              </p>
              <p class="tips">填写appid，“平台”分配给各实验平台的唯一编号</p>
              <p class="err-tip" />
            </div>
            <div class="param-item">
              <p>
                <span class="param-name"><i class="require">*</i>secret</span>
                <input v-model="api5.secret" placeholder="如：DDO7jw9TAZlLwRLRKSpBWXIlYZe9PKaD5Wc1S5ZQ0U8=">
              </p>
              <p class="tips">填写secret，是由“实验空间”分配给各实验平台的密钥</p>
              <p class="err-tip" />
            </div>
            <div class="debug-line">
              <span class="debug-btn" :class="{disable: api5.ticket.length === 0 || api5.appid.length === 0 || api5.secret.length === 0}" @click="callApi5">检查问题</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="retData !== null" class="debug-form debug-result">
        {{ retData }}
      </div>
    </div>
  </div>
</template>
<script>
import { md5, getAccessToken, refreshAccessToken, uploadScore } from '@/api/oauth.js'
export default {
  components: {
  },
  data() {
    return {
      btnTab: 'api1',
      addr: '',
      api1: {
        ticket: '',
        appid: '',
        secret: '',
        signature: ''
      },
      api2: {
        refresh_token: '',
        appid: '',
        signature: ''
      },
      api4: {
        access_token: '',
        body: ''
      },
      api5: {
        ticket: '',
        appid: '',
        secret: ''
      },
      retData: null
    }
  },
  mounted() {
    if (process.client) {
      this.addr = window.location.protocol + '//' + window.location.hostname + ':8180'
    }
  },
  methods: {
    callApi1(btn) {
      if (btn.target.classList.contains('disable')) {
        return
      }
      const params = this.api1
      const query = Object.entries(params).length ? `?${new URLSearchParams(params)}` : ''
      getAccessToken(query).then(res => {
        this.retData = res
      }).catch((e) => {
        this.retData = e
      })
    },
    callApi2(btn) {
      if (btn.target.classList.contains('disable')) {
        return
      }
      const params = this.api2
      const query = Object.entries(params).length ? `?${new URLSearchParams(params)}` : ''
      refreshAccessToken(query).then(res => {
        this.retData = res
      }).catch(e => {
        this.retData = e
      })
    },
    callApi4(btn) {
      if (btn.target.classList.contains('disable')) {
        return
      }
      const params = this.api4
      uploadScore(params.access_token, params.body).then(res => {
        this.retData = res
      }).catch(e => {
        this.retData = e
      })
    },
    callApi5(btn) {
      if (btn.target.classList.contains('disable')) {
        return
      }
      const params = this.api5
      const query = Object.entries(params).length ? `?${new URLSearchParams(params)}` : ''
      md5(query).then(res => {
        this.retData = res
      }).catch(e => {
        this.retData = e
      })
    }
  }
}
</script>
